<template>
    <div class="week">
        <div class="week-desc">
            <div class="week-desc-content">
                //////////<span>周末出游</span>//////////
                <p>致力推荐超完美套餐</p>
            </div>
        </div>
        <div class="week-swiper">
              <swiper :options="swiperOption">
                <swiper-slide 
                    v-for="item of weekSwiper"
                    :key="item.id"
                >
                    <div class="weekSwiper-item">
                        <div class="weekSwiper-item-img">
                            <img :src="item.imgUrl">
                        </div>
                        <div class="weekSwiper-item-desc">
                            <p>{{item.desc}}</p>
                            <em>{{item.detail}}</em>
                        </div>
                    </div>
                </swiper-slide>
            </swiper>
        </div>
    </div>
</template>
<script>
export default {
    name: 'homeWeekEnd',
    props: {
        homeWeekList: Array
    },
    data(){
        return {
            weekSwiper: [
                {
                    id: '00001',
                    imgUrl: 'https://pic5.40017.cn/03/000/52/09/rB5oQFy2lJiAX8VmAAH-qfnS23k464_280x190_00.jpg',
                    desc: '看宋城千古情',
                    detail: '梦回大宋'
                },
                {
                    id: '00002',
                    imgUrl: 'https://pic5.40017.cn/03/000/8c/da/rB5oQFwZtfyABsmlAABcBH79wXs668_280x190_00.jpg',
                    desc: '拈花湾',
                    detail: '禅意假日 古韵风光'
                },
                {
                    id: '00003',
                    imgUrl: 'https://pic5.40017.cn/01/000/00/9c/rBANC1vD9_GAb2qVAAD1zTnOfl0327_280x190_00.jpg',
                    desc: '迪士尼',
                    detail: '点亮心中奇梦'
                },
                {
                    id: '00004',
                    imgUrl: 'https://pic5.40017.cn/03/000/52/09/rB5oQFy2lJiAX8VmAAH-qfnS23k464_280x190_00.jpg',
                    desc: '拈花湾',
                    detail: '禅意假日 古韵风光'
                },
                {
                    id: '00005',
                    imgUrl: 'https://pic5.40017.cn/03/000/8c/da/rB5oQFwZtfyABsmlAABcBH79wXs668_280x190_00.jpg',
                    desc: '拈花湾',
                    detail: '禅意假日 古韵风光'
                }
            ],
            swiperOption: {
                freeMode: true,
                spaceBetween:20,
                slidesPerView:3
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.week{
    overflow: hidden;
    height: 0;
    padding-bottom: 58%;
    .week-desc{
        position: relative;
        overflow: hidden;
        height: 0;
        font-size: 16px;
        padding-bottom: 15.5%;
        .week-desc-content{
            width: 100%;
            text-align: center;
            color: #aaa;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            span{
                display:inline-block;
                color: #000;
                font-weight: bold;
                margin: 0.15rem 0.3rem;
            }
        }
    }
    .week-swiper{
        overflow: hidden;
        width: 100%;
        height: 0;
        padding-bottom: 84.5%;
        .weekSwiper-item{
            overflow: hidden;
            width: 100%;
            height: 0;
            padding-bottom: 120%;
            margin-left: 0.2rem;
            border: 0.02rem solid #ccc;
            .weekSwiper-item-img{
                overflow: hidden;
                height: 0;
                padding-bottom: 67.9%;
                img{
                    max-width: 100%;
                }
            }
            .weekSwiper-item-desc{
                text-align: center;
                padding-top: .3rem;
                p{
                    font-size: 15px;
                    font-weight: 700;
                    color: #333;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                em{
                    display: inline-block;
                    margin-top: 0.1rem;
                    color: #999;
                    font-style: normal;
                    font-size: 12px;
                }
            }
        }
    }
}
</style>